<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-tabs v-model="activeName">
        <el-tab-pane label="用户管理" name="first">
          <el-button type="primary" @click="$refs.roleDialog.open()">新增角色</el-button>
          <el-table :data="roleList" style="width: 100%" class="role-table">
            <el-table-column type="index" label="序号" />
            <el-table-column prop="name" label="角色名称" />
            <el-table-column prop="description" label="描述" />
            <el-table-column v-slot="{row}" prop="date" label="操作">
              <el-button type="primary" @click="$refs.allocatePermission.open(row.id)">分配权限</el-button>
              <el-button type="success" @click="$refs.roleDialog.open(row.id)">编辑</el-button>
              <el-button type="danger" @click="deleteRole(row)">删除</el-button>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="公司信息" name="second">
          <el-form
            ref="form"
            :model="company"
            class="company-form"
            label-width="80px"
          >
            <el-form-item label="公司名称">
              <el-input v-model="company.name" disabled />
            </el-form-item>
            <el-form-item label="公司地址">
              <el-input v-model="company.companyAddress" disabled />
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="company.mailbox" disabled />
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="company.remarks" type="textarea" disabled />
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <!-- 通过判断 activeName如果是first 那就显示-->
      <el-pagination
        v-if="activeName==='first'"
        background
        layout="prev, pager, next"
        :total="total"
        class="role-pagination"
        :page-size="pagesize"
        @current-change="changePage"
      />
    </div>
    <RoleDialog ref="roleDialog" @reload="loadRoleList" />
    <AllocatePermission ref="allocatePermission" />
  </div>
</template>

<script>
// 导入获取公司信息接口
import { getCompanyInfo, getRoleList, deleteRole } from '@/api/company'
import AllocatePermission from './component/allocate-permission.vue'
import RoleDialog from './component/role-dialog.vue'
export default {
  components: { RoleDialog, AllocatePermission },
  data() {
    return {
      activeName: 'first',
      company: {},
      roleList: [],
      page: 1,
      pagesize: 25,
      total: 0
    }
  },
  async created() {
    const res = await getCompanyInfo(this.$store.state.user.userInfo.companyId)
    this.company = res
    this.loadRoleList()
  },
  methods: {
    // 调用接口获取角色列表
    async loadRoleList() {
      const res = await getRoleList({
        page: this.page,
        pagesize: this.pagesize
      })
      // console.log(res)
      this.roleList = res.rows
      this.total = res.total
    },
    // 切换分页的方法
    changePage(page) {
      this.page = page
      this.loadRoleList()
    },
    // 确认删除提示框
    async  deleteRole(row) {
      await this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      // 删除角色 调用接口
      await deleteRole(row.id)
      // 判断不是第一页&&页面数据只有1个数据的时候
      if (this.roleList.length === 1 && this.page > 1) {
        // 刷新显示上一页
        this.page--
      }
      // 刷新页面
      this.loadRoleList()
      // 提示用户删除成功
      this.$message.success('删除成功')
    }
  }
}
</script>

<style scoped>
.role-table {
  margin-top: 30px;
}

.company-form {
  width: 50%;
}
.role-pagination{
  text-align: center;
}
</style>
